<template>
  <main class="wss-container">
    <NewCard
      :isright="true"
      :style="{ 'margin-bottom': padding }"
      title="咨询定价"
      :topTitleLeft="true"
    >
      <template #right>
        <!-- <ComForm
          @EventReset="reset"
          :list="comForm"
          @EventOnsubmit="inquireFn"
        ></ComForm> -->
      </template>
      <div class="content-box">
        <NewCard title="内容" class="table">
          <div>
            <ComTable
              @EventRowClick="RowClickFn"
              @handleSizeChange="handleSizeChange"
              @handleCurrentChange="handleCurrentChange"
              :pagination="{
                total: pageing.total,
                pageNum: pageing.pageNum,
                pageSize: pageing.pageSize,
              }"
              :list="tableList"
              :modes="tableModes"
            >
            </ComTable>
          </div>
        </NewCard>
        <NewCard title="修改" class="edit-box">
          <div>
            <el-form :model="editForm" :rules="rules">
              <el-form-item
                label="咨询类型"
                :label-width="formLabelWidth"
                prop="pricType"
              >
                <el-input v-model="editForm.consultMode" disabled></el-input>
              </el-form-item>
              <el-form-item
                label="常数（元）"
                :label-width="formLabelWidth"
                prop="base"
              >
                <el-input
                  v-model.number="editForm.base"
                  autocomplete="off"
                  placeholder="请输入常数价格"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="交付拨比（%）"
                :label-width="formLabelWidth"
                prop="expertCommission"
              >
                <el-input
                  v-model="editForm.expertCommission"
                  autocomplete="off"
                  placeholder="请输入百分比"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="商务拨比（%）"
                :label-width="formLabelWidth"
                prop="cmCommission"
              >
                <el-input
                  v-model.number="editForm.cmCommission"
                  autocomplete="off"
                  placeholder="请输入百分比"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="分享拨比（%）"
                :label-width="formLabelWidth"
                prop="shareCommission"
              >
                <el-input
                  v-model.number="editForm.shareCommission"
                  autocomplete="off"
                  placeholder="请输入百分比"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <div>
                  <el-button size="mini" @click="reset">重设</el-button>
                  <el-button
                    size="mini"
                    :disabled="editForm.consultMode == '' ? true : false"
                    type="primary"
                    @click="comfirmEdit"
                    >确 定</el-button
                  >
                </div>
              </el-form-item>
            </el-form>
          </div>
        </NewCard>
      </div>

      <!-- 修改内容定价 end-->
    </NewCard>
  </main>
</template>
<script>
import { padding } from "@/assets/styles/variables.scss";

import ComSelect from "../../../components/comSelect.vue";
import {
  getPriceCommissionListApi,
  getPriceCommissionEditApi,
} from "@/wss/newApi_3-24/financial/priceCommission.js";
import ComTable from "../../../components/comTable.vue";
import ComForm from "../../../components/comForm.vue";
import NewCard from "../../../components/newCard.vue";
import { changeTypes, getfilterParams } from "@/wss/utils/wss.js";
export default {
  components: {
    ComTable,
    ComForm,
    NewCard,
    ComSelect,
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value == "") return callback(new Error("年龄不能为空"));
      value = Number(value);

      if (typeof value == "number") {
        if (value <= 1 && value >= 0) return callback();
      }
      callback(new Error("年龄不能为空"));
    };
    return {
      options: {
        value: "",
        title: "快速筛选",
        list: [
          {
            value: "1",
            label: "正常",
          },
          {
            value: "2",
            label: "失败",
          },
        ],
      },
      padding: padding,
      // 标记第一次过滤
      isFirst: true,
      // 查看对话框
      lookDialogVisible: false,
      isFailtrueFilter: false, //是否过滤失败筛选
      // 保存切换失败和正常筛选的数组
      tempFilterArr: [],
      // 类型数组
      typeArr: [],
      dialogVisible: false,
      // 是否再次过滤筛选条件
      isFilter: true,
      // 表格配置
      config: {
        quanxian: "work:crawler:add",
        // border: true,
        isAdd: true,
        loading: false,
      },
      // 分页参数
      pageing: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        type: "1,3,4,6",
        consultMode: "",
        consultType: "",
        expertLevel: "",
      },
      // 失败和成功状态
      currentStatus: "1",
      // 运行中的数量
      operation: 0,
      activeName: "first",
      // 没有转换过的数据
      noChangeTableList: [],
      // 表单配置
      comForm: {
        modes: [
          {
            formType: "select",
            placeholder: "请选择咨询方式",
            mode: "consultMode",
            value: "",
            select: [
              {
                label: "多人问答",
                value: 3,
              },
              {
                label: "一人问答",
                value: 4,
              },
            ],
          },
          {
            formType: "select",
            placeholder: "请选择问题类别",
            mode: "consultType",
            value: "",
            select: [
              {
                label: "专利",
                value: 3,
              },
              {
                label: "合同",
                value: 4,
              },
              {
                label: "用功",
                value: 5,
              },
            ],
          },
          {
            formType: "select",
            mode: "expertLevel",
            placeholder: "请选择专家等级",

            value: "",
            select: [
              {
                label: "甲",
                value: "5",
              },
              {
                label: "乙",
                value: "4",
              },
              {
                label: "丙",
                value: "3",
              },
            ],
          },
        ],
      },

      // 表格数据
      tableList: [],
      // 表格配置
      tableModes: [
        {
          label: "咨询方式",
          mode: "consultWay",
        },
        {
          label: "专家等级",
          mode: "expertRank",
          width: 100,
          showOverflowTooltip: true,
        },
        {
          label: "问题类别",
          mode: "consultType",
          options: [
            {
              l: "专利",
              v: 1,
            },
            {
              l: "合同",
              v: 3,
            },
            {
              l: "用工",
              v: 4,
            },
            {
              l: "超级合同",
              v: 6,
            },
            {
              l: "咨询",
              v: 7,
            },
          ],
        },
        {
          label: "常数（元）",
          mode: "base",
          width: 100,
          showOverflowTooltip: true,
        },
        {
          label: "定价规则",
          mode: "priceRule",
          showOverflowTooltip: true,
          width: 200,
          effectiveStatus: true,
          options: [
            {
              l: "常数",
              v: 1,
            },
            {
              l: "当前时间/上架时间*常数",
              v: 2,
            },
          ],
        },
        {
          label: "交付分成",
          mode: "expertCommission",
          showOverflowTooltip: true,
        },

        {
          label: "分享分成",
          mode: "shareCommission",
        },
        {
          label: "商务拨比（%）",
          mode: "cmCommission",
          showOverflowTooltip: true,
        },
      ],
      // 修改定价参数
      editForm: {
        consultMode: "",
        base: "",
        expertCommission: "",
        cmCommission: "",
        shareCommission: "",
      },
      //修改内容定价表单判断
      rules: {
        type: [
          {
            required: true,
            message: "请选择咨询方式",
            trigger: "number",
            type: "blur",
          },
        ],
        base: [
          {
            required: true,
            message: "不可为空",
            trigger: "blur",
            type: "number",
          },
        ],
        expertCommission: [
          {
            required: true,
            message: "0-1之间",
            trigger: "blur",
            type: "number",
            validator: validatePass,
          },
        ],
        cmCommission: [
          {
            required: true,
            message: "0-1之间",
            trigger: "blur",
            type: "number",
            validator: validatePass,
          },
        ],

        shareCommission: [
          {
            required: true,
            message: "0-1之间",
            trigger: "blur",
            type: "number",
            validator: validatePass,
          },
        ],
      },
      //修改内容定价 提示框显示状态
      dialogFormVisible: false,
      //修改内容定价 标题宽度
      formLabelWidth: "120px",
    };
  },
  created() {
    this.getPriceCommissionList();
  },

  methods: {
    // 重设
    reset() {
      this.editForm = {
        consultMode: "",
        base: "",
        priceRule: "",
        expertCommission: "",
        cmCommission: "",
        shareCommission: "",
      };
      this.pageing = { pageNum: 1, pageSize: 10, total: 0, type: "1,3,4,6" };
    },
    // 修改定价确认
    async comfirmEdit() {
      let editForm = this.editForm;
      editForm.consultMode = changeTypes(editForm.consultMode);

      let { code, msg } = await getPriceCommissionEditApi(editForm);
      if (code != 200) return;
      editForm.consultMode = changeTypes(editForm.consultMode);
      this.getPriceCommissionList();
      this.$message({
        message: msg,
        type: "success",
      });
    },
    // 表格行被点击了
    RowClickFn(row) {
      // 1法律 3头条 4问答 6超级合同 7咨询
      let changeRow = JSON.parse(JSON.stringify(row));
      // console.log(changeRow.type);
      // if (changeRow.type == 1) {
      //   changeRow.type = "法律";
      // } else if (changeRow.type == 3) {
      //   changeRow.type = "头条";
      // } else if (changeRow.type == 4) {
      //   changeRow.type = "问答";
      // } else if (changeRow.type == 6) {
      //   changeRow.type = "超级合同";
      // } else {
      //   changeRow.type = "咨询";
      // }
      changeRow.consultMode = changeTypes(changeRow.consultMode);
      this.editForm = changeRow;
      console.log(row);
    },
    // 编辑
    edit() {
      this.dialogFormVisible = true;
    },
    // 当前页发生改变时
    handleCurrentChange(pageNum) {
      this.pageing.pageSize = pageNum;
      this.getPriceCommissionList();
    },
    // 页容量发生改变
    handleSizeChange(pageSize) {
      this.pageing.pageSize = pageSize;
      this.getPriceCommissionList();
    },
    getfilterParamsFn(tableList) {
      let s = new Set();
      for (let index = 0; index < tableList.length; index++) {
        s.add(tableList[index].type);
        // const element = tableList[index];
      }
      let arr = Array.from(s, (item) => {
        return {
          type: item,
        };
      });
      return getfilterParams(arr);
    },
    async getPriceCommissionList() {
      const _this = this;

      let { code, rows, total } = await getPriceCommissionListApi(
        _this.pageing
      );
      if (code != 200) return;

      let tableList = JSON.parse(JSON.stringify(rows));
      _this.pageing.total = total;
      // console.log(_this.isFirst);
      // 找出过滤类型
      // if (_this.isFirst) {
      //   let arr = _this.getfilterParamsFn(tableList);
      //   _this.comForm.modes.forEach((item) => {
      //     console.log(_this.comForm,"111")
      //     item.select = arr;
      //   });
      //   _this.isFirst = false;
      // }

      _this.tableList = tableList;
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },
    inquireFn(paramsArr) {
      console.log(paramsArr);
      let { pageing } = this;
      // 筛选数据
      paramsArr.forEach((item) => {
        for (const key in item) {
          this.pageing[key] = item[key];
        }
      });
      if (pageing.type == "" || !pageing.type) {
        pageing.type = "1,3,4,6";
      }
      pageing.pageNum = 1;
      this.getPriceCommissionList();
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 10px;
  background-color: rgba(123, 123, 123, 0.2);
  .title {
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 20px;
  }
  ::v-deep .el-card {
    border-radius: 0;
    border: 0;
  }
  ::v-deep .el-tabs__nav-scroll {
    overflow: hidden;
    background: #ffffff;
    box-sizing: border-box;
    padding-left: 20px;
    height: 70px;
    line-height: 70px;
  }
  ::v-deep .el-tabs__item.is-active,
  ::v-deep .el-tabs__item:hover {
    color: #f97f2a;
  }
  ::v-deep .el-tabs__active-bar {
    background-color: transparent;
  }
  // ::v-deep .el-tabs__item:hover {
  //   color: #f97f2a;
  // }
}
::v-deep .el-drawer {
  padding: 0px 30px;
}
::v-deep .el-drawer__header {
  padding: 0px;
}
::v-deep .container .right {
  margin-top: 0px;
}
::v-deep .el-form-item {
  margin-bottom: 0px;
  margin-top: 8px;
}
::v-deep .el-form-item__label {
  line-height: 56px;
}
.content-box {
  display: flex;
  .table {
    flex: 1.8;
    margin-right: 30px;
  }
  .edit-box {
    flex: 0.7;
  }
}
</style>